<template>
<el-dialog :visible.sync="visible" title="菜品配置" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" top="50px">
    <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%" height="350px" >
        <el-table-column prop="name" label="菜品名称" header-align="center" min-width="120" align="center"></el-table-column>
        <el-table-column prop="coverImage" label="封面" header-align="center" min-width="120" align="center">
            <template slot-scope="scope">
                <el-image :src="scope.row.coverImage" style="width:100px;height:100px">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteHandle(scope.$index)">{{ $t("delete") }}</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-form style="margin-top:30px" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'">
        <el-row :gutter="30">
            <el-col :span="24">
                <el-form-item label="菜品名称" prop="name">
                    <el-input v-model="dataForm.name" placeholder='菜品名称' style="width:90%"></el-input>
                </el-form-item>
            </el-col>
              <el-col :span="24">
                <p class="pdl60">菜品图<span>(支持png、jpg，建议尺寸336*252px，最多1张)</span></p>
            </el-col>
            <el-col :span="24">
                <el-form-item label="" prop="coverImage">
                    <el-upload class="avatar-uploader" :action="url" :show-file-list="false" :on-success="(res, file, fileList)=>successHandle1(res, file, fileList)" :before-upload="beforeUploadHandle">
                        <img v-if="dataForm.coverImage" :src="dataForm.coverImage" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                     <el-button type="primary" @click="save()">
                   保存
                </el-button>
                </el-form-item>
               
            </el-col>
        </el-row>
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
import Cookies from "js-cookie";
export default {
    data() {
        return {
            id:'',
            visible: false,
            dataListLoading: false,
            dataList: [],
            fileList: [],
            url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
            num: 0,
            dataForm: {
                id: '',
                foodId: '',
                name: '',
                coverImage: ''
            },
        };
    },
    computed: {
        dataRule() {
            return {
                name: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }],
                coverImage: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }]
            };
        },
    },
    methods: {
        // 上传之前
        beforeUploadHandle(file) {
            if (
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
            ) {
                this.$message.error(this.$t("upload.tip", {
                    format: "jpg、png、gif"
                }));
                return false;
            }
        },
        // 上传成功
        successHandle1(res, file, fileList) {
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.fileList.unshift({
                name: "",
                url: res.data.url,
            });
            this.dataForm.coverImage = res.data.url;
        },
        deleteHandle(index) {
            console.log(index)
            this.dataList.splice(index, 1);
        },
        init() {
            this.visible = true;
            this.id=this.dataForm.id;
            this.dataForm.foodId = this.dataForm.id;
            console.log(this.dataForm.id)
             console.log(this.dataForm.foodId)
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.dataListLoading = true;
            this.$http
                .get("/sys/isfoodsuggest/detail/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    this.dataListLoading = false;
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    console.log(res.data)
                    this.dataList = res.data || [];
                })
                .catch(() => {});
        },
        save(){
             this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.dataForm.id = null;
                    this.dataList.push(this.dataForm);
                    this.dataForm={
                        id:'',
                        foodId:this.id,
                        name: '',
                        coverImage:''
                    }
             })

        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$http.post(
                            "/sys/isfoodsuggest/saveBatch/"+this.id,
                            this.dataList
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
